<script setup lang="ts">
import { EEventType } from '@/enum';
import useAppStore from '../../../store/modules/app';
import useModal from '@/hooks/useModal';
import { navigate } from '@/utils/navigate';
import EventCollection from '@/pages/home/eventCollection';

interface IProps {
  btnList: IServerBtnListBtnList[];
}
const props = defineProps<IProps>();
const store = useAppStore();
const { token } = store.$state;
const { showModal } = useModal();

// 点击按钮
const handlePress = (item: IServerBtnListBtnList) => {
  if (!token) {
    showModal('需要登录，是否去登录？', {
      showCancel: true,
      success: (res) => {
        if (res.confirm) {
          navigate({ url: '/subcontract/person/login/index?path=/pages/home/index' });
        }
      },
    });
    return;
  }
  EventCollection.onPress(item);
  store.$patch({ btnInformation: { ...item, moduleType: undefined } });
};

// 长按语音下单
const handleLongPress = (item: IServerBtnListBtnList) => {
  if (!token) {
    showModal('需要登录，是否去登录？', {
      showCancel: true,
      success: (res) => {
        if (res.confirm) {
          navigate({ url: '/subcontract/person/login/index?path=/pages/home/index' });
        }
      },
    });
    return;
  }
  EventCollection.onLongPress(item);
  store.$patch({ btnInformation: { ...item, moduleType: undefined } });
};
</script>

<template>
  <view class="c-pd grid grid-cols-3 gap-3" v-if="props.btnList.length > 0">
    <view class="c-br overflow-hidden shadow-lg bg-[white]" v-for="item in props.btnList" :key="item.id" @click="handlePress(item)" @longpress="handleLongPress(item)">
      <van-image width="100%" height="110px" fit="cover" :src="item.value" />
      <view class="bg-white text-align-center py-[6px] border-t-[1px] border-[#f5f5f5] border-solid border-l-0 border-r-0 border-b-0">
        <view class="flex justify-center items-center text-[#f18311]" v-if="item.relationType == 1 && (item.eventId === 10 || item.eventId === 18 || item.eventId === 19) && item.voiceOrderFlag">
          <text>长按</text>
          <i class="i-emojione-monotone:studio-microphone"></i>
          <text>下单</text>
        </view>
        <text v-else class="block text-[#f18311] c-text-ellipsis">{{ EEventType[item.eventId] || '点击进入' }}</text>
      </view>
    </view>
  </view>
  <view class="w-full" v-else>
    <van-empty description="暂无数据" />
  </view>
</template>
